<link href="/assets/addons/fastflow/plugins/card/card.css" rel="stylesheet" type="text/css"/>
<style>
    legend {
        padding-bottom: 5px;
        font-size: 14px;
        font-weight: 600;
        padding-left: 10px;
        padding-right: 15px;
        /*color: #0a5ba6;*/
        margin-bottom:0;
        margin-top: 8px;
        /*background: #f5f5f5;*/
    }
    .ebill{
        height: calc(100vh - 124px)!important;
        overflow: auto;
    }
    .content{
        padding-top: 8px;
        background: #ecf0f5;
    }
    .fastflow-worker{
        padding: 25px 15px 0 15px;
        border-top: 1px solid #cdcdcd;
        /*background: #f5f5f5;*/
    }
    body.is-dialog {
        background: #ecf0f5 !important;
    }
    div ::-webkit-scrollbar {
        /*滚动条整体*/
        width: 12px;
        height: 8px;
        border-radius: 5px;
    }
    div ::-webkit-scrollbar-track {
        /*滚动条轨道*/
        background: #e3e3e3;
        border-radius: 2px;
    }
    div ::-webkit-scrollbar-thumb {
        /*滚动条里面的滑块*/
        background: #d1d1d1;
        border-radius: 2px;
    }
    div ::-webkit-scrollbar-thumb:hover {
        /*滚动条鼠标事件，鼠标放上去出现的事件*/
        background: #a8a8a8;
    }
    div ::-webkit-scrollbar-corner {
        /*滚动条边角*/
        background: #a8a8a8;
    }
    .btn-group{
        display: flex;
        position: relative;
        vertical-align: middle;
        line-height: 32px;
    }
    .btn-group .btn{
        margin-right: 6px;
    }
    .empty-hint{
        width: 100%;
        height: 34px;
        text-align: center;
        position: absolute;
        text-align: center;
        top:calc(50vh - 17px);
        font-size: 16pt;
        font-family: '黑体';
        color: #c2c2c2;
    }
    .stamp-toolbar{
        position: absolute;
        bottom: -30px;
        right: 0;
    }
    .stamp-list{
        height: calc(100vh - 124px)!important;
        overflow: auto;
        border: 1px solid #e9e9e9;
    }
    .contenedorCards .card {
        width: 126px!important;
    }
    .contenedorCards .card .wrapper {
        border-radius: 4px;
        box-shadow: 0 0 5px 1px rgb(0 0 0 / 10%);
    }
    .contenedorCards .card .wrapper .imgProd {
        background-position: center!important;
        height: 110px!important;
        padding: 8px;
    }
    .contenedorCards .card .wrapper .infoProd .actions .preciosGrupo {
        height: 40px!important;
    }
    .contenedorCards .card .wrapper .infoProd {
        height: 32px!important;
        padding: 0px 10px 0px 10px!important;
        margin-top: 4px!important;
    }
    .contenedorCards .card .wrapper .infoProd .actions .action {
        bottom: 0px!important;
        right: 4px!important;
    }
    .contenedorCards .card .wrapper .infoProd .actions .preciosGrupo .precio {
        font-size: 15px!important;
        padding-top: 8px!important;
    }
    .contenedorCards .card .wrapper .infoProd .extraInfo {
        margin-top: 4px!important;
        height: 20px!important;
    }
    .ebill{
        border: 1px solid #e0e0e0;
    }
    .ebill,.ebill-content{
        position: relative;
        margin: auto;
    }
    .ebill .stamp {
        position: absolute;
        cursor: move;
        border: 1px dashed #ccc;
        /*padding: 8px;*/
        /*display: -webkit-box;*/
        /*-webkit-box-pack: center;*/
        /*-webkit-box-align: center;*/
        top:200px;
        left:40%;
    }
    .stamp.ok {
        cursor: default;
        border-color: transparent;
    }
    .stamped{
        position: absolute;
    }
    .sign {
        position: absolute;
        cursor: move;
        border: 1px dashed #ccc;
        padding: 8px;
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;
    }
    .resizeHandle-br {
        display: block;
        position: absolute;
        width: 10px;
        height: 10px;
        border-right: 2px solid #b2b2b2;
        border-bottom: 2px solid #b2b2b2;
        right: 0px;
        bottom: 0px;
        overflow: hidden;
        cursor: nw-resize;
    }
    .ebill-title{
        vertical-align: middle;
        margin-right: 12px;
    }

</style>
<div class="content" style="background: white;">
    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
        <legend>
            <span class="ebill-title">{$signature.ebill_copy.title|htmlentities}</span>
            <a href="{:url('/fastflow/flow/flow/detail',['bill'=>$signature.bill,'bill_id'=>$signature.bill_id])}" class="btn btn-xs btn-info btn-dialog" title="单据详情" data-area='["95%","95%"]'>单据ID：{$signature.bill_id|htmlentities} <i class="fa fa-eye"></i></a>
            <a id="undo" href="javascript:;" class="btn btn-xs btn-danger pull-right disabled"><i class="fa fa-undo"></i> 撤销</a>
        </legend>
        <div class="ebill" id="ebill">
            <div class="ebill-content" id="ebill-content" style="width: {$signature.ebill_width}px;height:{$signature.ebill_height}px;background-image: url('{$signature.ebill}')">
                <div class="stamp hidden" id="stamp">
                    <div class="stamp-content" style='height:110px;width:110px;background-size: contain;background-repeat:no-repeat;'></div>
                    <div class="stamp-toolbar">
                        <a class="btn btn-xs btn-success stamp-ok" id="stamp-ok">盖章</a>
                        <a class="btn btn-xs btn-danger stamp-cancel" id="stamp-cancel">取消</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
        <legend>选择印章</legend>
        <div class="stamp-list">
            <div class="contenedorCards" id="contenedorCards">
                {volist name='stampList' id='stamp'}
                <div class="card" data-id="{$stamp.id}" data-title="{$stamp.title}">
                    <div class="wrapper">
                        <div class="imgProd">
                            <div class="stamp-image" style='height:100%;width:100%;background-image:url("{$stamp.file}");background-size:contain;background-repeat:no-repeat;'></div>
                        </div>
                        <div class="infoProd">
                            <p class="extraInfo">{$stamp.title|htmlentities}</p>
                        </div>
                    </div>
                </div>
                {/volist}
            </div>
            <span class="empty-hint {if $stampList}hidden{/if}">无印章</span>

        </div>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 footer" style="margin-top: 8px;">
        <div class="pull-right" style="margin-right: 18px;">
            <button type="submit" class="btn btn-success btn-embossed" disabled>提交</button>
            <button type="close" class="btn btn-danger btn-embossed">关闭</button>
        </div>
    </div>
</div>


